<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>系统登录</title>
	<link rel="stylesheet" href="static/reset.css">
	<link rel="stylesheet" href="static/login.css">
	<!-- favicon 图标 -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<script type="text/javascript">
		//防止在弹窗中出现登录页面
        if (window != top){
         top.location.href = location.href;
        }
	</script>
</head>
<body>
	<div class="wrapper-login">
		<div class='logo-box'>
			<img src="images/logo-login.png" alt="">
		</div>
		<form id="loginForm" class="form-box" >
			<div class="inp-box user"><input type="text" placeholder="请输入用户名" name="username" id="user"></div>
			<p class="remind remind1" id="remind1">请输入用户名</p>
			<div class="inp-box pass"><input type="password" placeholder="请输入密码" name="password" id="pass" ></div>
			<p class="remind remind2" id="remind2">请输入密码</p>
			<div class="btn-box">
				<button class="button submit-button" id="loginBtn" type="submit">登录</button>
				<button class="button fail-button" id="failBtn" type='button' onclick="clearForm()">取消</button>
			</div>
		</form>
	</div>
</body>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js" ></script>
	
	<script type="text/javascript">
		var remind1= $('#remind1'),
			remind2= $('#remind2');
		
		$('#user').blur(function(){
		 	var user = $('#user').val().trim();
		 	if(!user){
				remind1.text('请输入用户名').show();	
			}else{
				remind1.hide();
			}
		})
		$('#pass').blur(function(){
		 	var pass = $('#pass').val().trim();
		 	if(!pass){
				remind2.text('请输入密码').show();		
			}else{
				remind2.hide();
			}
		})
		
		//登录程序
		function submitFn(){
		
			var user = $('#user').val().trim(),
				pass = $('#pass').val().trim();
			
			if(!user){
				remind1.text('请输入用户名').show();
				remind2.hide()
				return false;
			}else if(!pass){
				remind1.hide();
				remind2.text('请输入密码').show();
				return false;
			}
			
			//开始登录后出现加载层
			var index = layer.load(2);
			var url = "/pms/loginAction";
			jQuery.ajax({
		        type:"post",
		        async:false,
		        url:url,
		        dataType:"json",
		        data:{loginName:user,pwd:pass},
		        success:function(data){
		        	var data = eval("("+data+")");
		        	if(data.success=="true"){
		        		location.href=data.homeUrl;
		        	}else{
						remind1.hide();
		        		$("#remind2").text(data.msg);
		        		$("#remind2").show();
		        		//登录失败去掉加载层
		        		layer.close(index);
		        	}
		        }
			});
			return false;
		}
		
		
		//表单提交事件
		$("#loginForm").submit(submitFn);
		
		//取消按钮事件
		function clearForm(){
			alert("clear");
			$('#user').val('');
			$('#pass').val('');
			remind1.hide();
			remind2.hide();
			return false;
		}
		
	</script>
</html>